<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模版语法之指令语法 v-???</title>
    <!--安装Vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<!--准备容器-->
<!--
    指令语法:
       1.什么是指令?有什么作用
            指令的职责是,当表达式的值改变的时候,将其产生的连带影响,响应式的作用于DOM
       2. Vue框架中的所有指令的名字都是以 "v-" 开头的
       3.插值是写在标签体当中的,那么这个指令写在哪里呢
            Vue框架中所有的指令都是以HTML标签的属性存在的,例如:
                <span 指令是写在这里的>{{这里是插值语法的书写的位置}}</span>
                注意:虽然指令是写在标签的属性位置上,但是这个指令浏览器是无法看懂的
                是需要先让Vue框架进行编译的,编译之后的内容浏览器是可以看懂的
      4.指令的语法规则
          指令的一个完整的语法格式:
            <HTML标签 v-指令名:参数="javascript表达式"></HTML标签>
            表达式:
                之前在插值语法中{{这里可以写什么}}，那么在指令中的表达式中就可以写什么,实际上是一样的
                但是需要注意的是:在指令中的表达式的位置不能再外层再添加一个{{}}
            不是所有的指令都有参数和表达式:
                有的指令,不需要参数,也不需要表达式,例如:v-once
                有的指令,不需要参数,但是需要表达式,例如:v-if="表达式"
                有的指令,既需要参数,又要表达式,例如：v-bind:参数="表达式"
      5.v-once 指令
        作用：只渲染元素一次,随后的重新渲染,元素及其所有的子节点都被视为静态内容并跳过,这可以用于优化更新性能

      6.v-if="表达式"指令
            作用：表达式的执行结果需要时一个布尔类型的数据:true或者false
                true : 这个指令所在的标签,会渲染到浏览器当中
                false:这个指令所在的标签,不会渲染到浏览器当中


-->

<div id="app">
    <h1>{{msg}}</h1>
    <h1 v-once>{{msg}}</h1>
    <h1 v-if="a > b">v-if测试:{{msg}}</h1>
</div>

<!--vue程序-->
<script>
    new Vue({
        el : '#app',
        data : {
            msg : 'Hello Vue!',
            a : 10 ,
            b : 11
        }
    })
</script>

</body>
</html>